{% load static %}
<!-- Slider -->
<div class="carousel w-full">
  {% for vis in data.visualisations.all %}
  <div id="slide{{ forloop.counter }}" class="carousel-item relative w-full {% if forloop.first %}rounded-box mb-3{% endif %}">
    <figure>
      <a href="{% get_media_prefix %}{{ vis.image }}">
        <img src="{% get_media_prefix %}{{ vis.image }}" class="w-full rounded-box" alt="{{ vis.title|default:'visualisation-image' }}">
      </a>
    </figure>
    <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
      <a href="#slide{% if forloop.first %}{{ forloop.length }}{% else %}{{ forloop.counter|add:'-1' }}{% endif %}" class="btn btn-circle">❮</a>
      <a href="#slide{% if forloop.last %}1{% else %}{{ forloop.counter|add:'1' }}{% endif %}" class="btn btn-circle">❯</a>
    </div>
  </div>
  {% empty %}
  <div class="carousel-item relative w-full rounded-box mb-3">
    <img
      src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
      class="w-full rounded-box"
      alt="No visualisations available" />
  </div>
  {% endfor %}
</div>
<div class="border border-gray-100  rounded-lg p-6 mb-6">
    <h2 class="text-xl font-bold mb-4">Visualisation</h2>
    <ul>
        <li>Data: {{ data.name_display }}</li>
        <li>Description: {{ data.description | truncatewords:30 }}</li>
    </ul>
</div>

<!-- End Slider -->